import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          colorScheme: const ColorScheme(
              primary: Colors.black,
              surfaceVariant: Colors.white,
              secondary: Colors.green,
              background: Colors.white, //整个页面背景色
              error: Colors.red,
              brightness: Brightness.light,
              onBackground: Colors.white,
              outlineVariant: Colors.white,
              onError: Colors.yellow,
              onPrimary: Colors.white,
              onSecondary: Colors.white,
              onSurface: Color.fromARGB(255, 233, 233, 240),
              surface: Colors.blue) //整个标题栏颜色
          // primarySwatch: Colors.blue, // 设置主色调,无效，怎么设都是白色
          ),
      home: Scaffold(
        appBar: AppBar(title: const Text("P27"), centerTitle: true),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Row(
      //左边输入框自适应宽度，右边固定宽度
      children: [
        Expanded(
          flex: 1,
          child: IconContainer(Icons.home), //这个元素设置宽度是没效果的
        ),
        IconContainer(Icons.search, color: Colors.cyan),
      ],
    );
    // Row(
    //   children: [
    //     Expanded(
    //       flex: 1,
    //       child: IconContainer(Icons.home), //这个元素设置宽度是没效果的
    //     ),
    //     Expanded(
    //       flex: 3,
    //       child: IconContainer(Icons.ac_unit, color: Colors.cyan),
    //     ),
    //   ],
    // );
    // return Container(
    //   width: double.infinity,
    //   height: double.infinity,
    //   color: Colors.black12,
    //   child: Column(
    //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
    //     crossAxisAlignment: CrossAxisAlignment.center,
    //     children: [
    //       IconContainer(Icons.home),
    //       IconContainer(Icons.ac_unit, color: Colors.cyan),
    //     ],
    //   ),
    // );

// Container(
//       width: double.infinity,
//       height: double.infinity,
//       color: Colors.black12,
//       child: Row(
//         mainAxisAlignment: MainAxisAlignment.spaceBetween,
//         crossAxisAlignment: CrossAxisAlignment.end,
//         children: [
//           IconContainer(Icons.home),
//           IconContainer(Icons.e_mobiledata_sharp),
//           IconContainer(Icons.ac_unit, color: Colors.cyan),
//         ],
//       ),
//     );

    //  Row(
    //   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    //   children: [
    //     IconContainer(Icons.home),
    //     IconContainer(Icons.emoji_emotions, color: Colors.yellow),
    //     IconContainer(Icons.ac_unit, color: Colors.cyan),
    //   ],
    // );

    // return IconContainer(
    //   Icons.hail_outlined,
    //   color: Colors.green,
    // );
  }
}

// ignore: must_be_immutable
class IconContainer extends StatelessWidget {
  Color color;
  IconData icon;
  IconContainer(
    this.icon, {
    super.key,
    this.color = Colors.red,
  });

// 这样写一样的
// IconContainer(
//     this.icon, {
//     Key? key,
//     this.color = Colors.red,
//   }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center, //另一种居中方法是child里面用Center组件包裹内容
      color: color,
      height: 80,
      width: 80,
      child: Icon(icon, color: Colors.white, size: 28),
    );
  }
}
